<template>
	<view class="register-container">
		<view class="decoration deco-1"></view>
		<view class="decoration deco-2"></view>

		<view class="header">
			<text class="title">创建账户</text>
			<text class="subtitle">开启您的花店之旅</text>
		</view>

		<view class="form-container">
			<view class="input-group">
				<view class="input-item">
					<text class="input-label">手机号📱</text>
					<input class="input" v-model="phone" placeholder="请输入手机号" placeholder-class="placeholder"
						type="number" maxlength="11" />
				</view>

				<view class="input-item">
					<text class="input-label">用户名</text>
					<div class="input-wrapper">
						<input class="input" v-model="username" placeholder="请输入用户名" placeholder-class="placeholder"
							maxlength="20" />
					</div>
				</view>

				<view class="input-item">
					<text class="input-label">密码</text>
					<div class="input-wrapper">
						<input class="input" v-model="password" placeholder="请设置密码" placeholder-class="placeholder"
							:password="!showPassword" />
						<text class="input-icon" @click="showPassword = !showPassword">
							{{ showPassword ? '👁️' : '👁️‍🗨️' }}
						</text>
					</div>
				</view>

				<view class="input-item">
					<text class="input-label">确认密码</text>
					<div class="input-wrapper">
						<input class="input" v-model="confirmPassword" placeholder="请再次输入密码"
							placeholder-class="placeholder" :password="!showConfirmPassword" />
						<text class="input-icon" @click="showConfirmPassword = !showConfirmPassword">
							{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
						</text>
					</div>
				</view>
			</view>

			<view class="agreement">
				<text class="check-icon" :class="{ 'checked': agreed }" @click="agreed = !agreed">✓</text>
				<text>我已阅读并同意</text>
				<text class="link">《用户协议》</text>
				<text>和</text>
				<text class="link">《隐私政策》</text>
			</view>

			<button class="register-btn" :class="{ 'loading': loading }" @click="handleRegister">
				<text v-if="!loading">注册</text>
				<text v-else>注册中...</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				username: '',
				password: '',
				confirmPassword: '',
				showPassword: false,
				showConfirmPassword: false,
				agreed: false,
				loading: false,
				baseUrl: 'http://localhost:3000' // 添加基础URL
			}
		},
		methods: {
			async handleRegister() {
				// 表单验证
				if (!this.agreed) {
					uni.showToast({
						title: '请阅读并同意协议',
						icon: 'none'
					});
					return;
				}

				if (!this.phone || !this.username || !this.password || !this.confirmPassword) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				if (!/^[\u4e00-\u9fa5a-zA-Z0-9]{3,}$/.test(this.username)) {
					uni.showToast({
						title: '用户名必须包含3个及以上汉字、字母或数字',
						icon: 'none'
					});
					return;
				}

				if (this.password.length < 6) {
					uni.showToast({
						title: '密码长度不能少于6位',
						icon: 'none'
					});
					return;
				}

				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					});
					return;
				}

				this.loading = true;

				try {
				  // 错误写法：const [err, res] = await uni.request(...)
				  // 正确写法：
				  const res = await uni.request({
				    url: `${this.baseUrl}/users/register`, // 修正路径
				    method: 'POST',
				    header: { 'Content-Type': 'application/json' },
				    data: {
				      phone: this.phone,
				      username: this.username,
				      password: this.password
				    }
				  });

					if (res.statusCode !== 200) {
					    throw new Error('网络请求失败');
					  }

					// 按照后端响应格式处理（使用status字段）
					const {
						status,
						message
					} = res.data;
					if (status === 200) {
						uni.showToast({
							title: message || '注册成功',
							icon: 'success'
						});
						setTimeout(() => {
							this.resetForm();
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: message || '注册失败',
							icon: 'none'
						});
					}

				} catch (err) {
					console.error('注册请求异常:', err);
					uni.showToast({
						title: err.message || '网络异常，请稍后重试',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			// 重置表单
			resetForm() {
				this.phone = '';
				this.username = '';
				this.password = '';
				this.confirmPassword = '';
				this.showPassword = false;
				this.showConfirmPassword = false;
				this.agreed = false;
			}
		}
	}
</script>

<style>
	.title {
		font-size: 56rpx;
		font-weight: bold;
		color: #6a4894;
		display: block;
		margin-bottom: 20rpx;
	}

	.subtitle {
		font-size: 32rpx;
		color: #9370db;
		opacity: 0.8;
	}

	.placeholder {
		color: #c0c0c0;
		font-size: 32rpx;
	}

	.input-label {
		font-size: 32rpx;
		color: #6a4894;
		font-weight: 500;
		margin-bottom: 20rpx;
		display: block;
	}

	.register-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #f8f5ff 0%, #f5efff 100%);
		padding: 40rpx;
		position: relative;
	}

	/* 输入框容器，用于定位图标 */
	.input-wrapper {
		position: relative;
		width: 100%;
	}

	.input {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		padding: 0 30rpx;
		padding-right: 80rpx;
		box-sizing: border-box;
		border: 2rpx solid #d1c4e9;
		border-radius: 15rpx;
	}

	/* 密码显示/隐藏图标样式 */
	.input-icon {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 30rpx;
		color: #7e57c2;
	}

	.agreement {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 60rpx;
		font-size: 28rpx;
		color: #666;
	}

	.check-icon {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #e6e6fa;
		border-radius: 6rpx;
		margin-right: 20rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 24rpx;
		color: transparent;
	}

	.check-icon.checked {
		background: #000000;
		border-color: #000000;
		color: white;
	}

	.register-btn {
		background: linear-gradient(135deg, #8a2be2);
		color: white;
		height: 100rpx;
		border-radius: 25rpx;
		font-size: 36rpx;
		font-weight: bold;
		border: none;
		margin-bottom: 50rpx;
	}

	/* 加载状态样式 */
	.register-btn.loading {
		opacity: 0.8;
	}
</style>